﻿<script lang="ts" setup name="planSharp">
import { ref, reactive, onMounted, watch } from 'vue';
import { auth } from '/@/utils/authFunction';
import { ElMessageBox, ElMessage } from 'element-plus';
import { downloadStreamFile } from '/@/utils/download';
import { usePlanSharpApi, type PlanSharpDetail } from '/@/api/plans/planSharp';
import editDialog from '/@/views/plans/planSharp/component/editDialog.vue';
import printDialog from '/@/views/system/print/component/hiprint/preview.vue';
import ModifyRecord from '/@/components/table/modifyRecord.vue';
import ImportData from '/@/components/table/importData.vue';
import { Setting, Rank } from '@element-plus/icons-vue';

const planSharpApi = usePlanSharpApi();
const COLUMN_SETTINGS_KEY = 'planSharpColumnSettings';
const printDialogRef = ref();
const editDialogRef = ref();
const importDataRef = ref();
const columnSettingsPopoverRef = ref();
interface PlanSharpTableItem {
	id: number;
	dock?: string;
	batch?: string;
	classificationSociety?: string;
	shipType?: string;
		shipOwner?: string;
		dockBefore?: string;
		dockAfter?: string;
		ch: string;
		startSharpTime?: string;
		offDockTime?: string;
		floatTime?: string;
		fdTotal?: number;
	swsInt?: number;
	otherInt?: number;
	firstPStrTime?: string;
	firstStrTime?: string;
	lastEndTime?: string;
	jindu?: number;
	statusAll?: number;
}

interface ColumnSetting {
	key: string;
	label: string;
	prop: keyof PlanSharpTableItem;
	visible: boolean;
	configurable: boolean;
	order: number;
}

	interface PlanSharpQueryParams {
		dock?: string;
		batch?: string;
		classificationSociety?: string;
		shipType?: string;
		shipOwner?: string;
		dockBefore?: string;
		dockAfter?: string;
		keyword?: string;
		ch?: string;
		statusAll?: string | number;
	}

	const createDefaultQueryParams = (): PlanSharpQueryParams => ({
		dock: undefined,
		batch: undefined,
		classificationSociety: undefined,
		shipType: undefined,
		shipOwner: undefined,
		dockBefore: undefined,
		dockAfter: undefined,
		keyword: undefined,
		ch: undefined,
		statusAll: undefined,
	});

const state = reactive({
	exportLoading: false,
	tableLoading: false,
	stores: {},
	showAdvanceQueryUI: false,
	dropdownData: {} as any,
	selectData: [] as PlanSharpTableItem[],
	tableQueryParams: createDefaultQueryParams(),
	tableParams: {
		page: 1,
		pageSize: 20,
		total: 0,
		field: 'dock', // 默认的排序字段
		order: 'ascending', // 排序方向
		descStr: 'descending', // 降序排序的关键字符
	},
	tableData: [] as PlanSharpTableItem[],
	expandedRows: [] as string[], // 展开的行
	shipDetailsCache: {} as Record<string, PlanSharpDetail[]>, // 船号详情缓存
	columnSettings: [] as ColumnSetting[],
	draggingIndex: -1,
});

// 页面加载时
onMounted(async () => {
	restoreColumnSettings();
});

watch(
	() => state.columnSettings,
	(newVal) => {
		localStorage.setItem(COLUMN_SETTINGS_KEY, JSON.stringify(newVal));
	},
	{ deep: true }
);

const resetQueryParams = () => {
	Object.assign(state.tableQueryParams, createDefaultQueryParams());
};

const defaultColumnSettings: ColumnSetting[] = [
	{ key: 'dock', label: '船坞', prop: 'dock', visible: true, configurable: true, order: 1 },
	{ key: 'batch', label: '批次', prop: 'batch', visible: true, configurable: true, order: 2 },
	{ key: 'classificationSociety', label: '船级社', prop: 'classificationSociety', visible: false, configurable: true, order: 3 },
	{ key: 'shipType', label: '船型', prop: 'shipType', visible: true, configurable: true, order: 4 },
	{ key: 'shipOwner', label: '船东', prop: 'shipOwner', visible: false, configurable: true, order: 5 },
	{ key: 'dockBefore', label: '浮前', prop: 'dockBefore', visible: false, configurable: true, order: 6 },
	{ key: 'dockAfter', label: '浮后', prop: 'dockAfter', visible: false, configurable: true, order: 7 },
	{ key: 'ch', label: '船号', prop: 'ch', visible: true, configurable: true, order: 8 },
];

const restoreColumnSettings = () => {
	try {
		const raw = localStorage.getItem(COLUMN_SETTINGS_KEY);
		if (raw) {
			const parsed = JSON.parse(raw) as ColumnSetting[];
			// 确保包含所有默认列，并按 order 合并
			const merged = defaultColumnSettings.map((def) => parsed.find((p) => p.key === def.key) ?? def);
			state.columnSettings = merged;
			return;
		}
	} catch (error) {
		console.warn('列设置读取失败，使用默认值', error);
	}
	state.columnSettings = [...defaultColumnSettings];
};

const resetColumnSettings = () => {
	state.columnSettings = [...defaultColumnSettings];
	columnSettingsPopoverRef.value?.hide?.();
};

const onColumnDragStart = (index: number, event: DragEvent) => {
	state.draggingIndex = index;
	event.dataTransfer?.setData('text/plain', index.toString());
};

const onColumnDrop = (targetIndex: number) => {
	const from = state.draggingIndex;
	if (from === -1 || from === targetIndex) return;
	const list = [...state.columnSettings];
	const [moved] = list.splice(from, 1);
	list.splice(targetIndex, 0, moved);
	// 重置 order
	state.columnSettings = list.map((c, idx) => ({ ...c, order: idx + 1 }));
	state.draggingIndex = -1;
};

const visibleColumns = () => state.columnSettings.filter((c) => c.visible).sort((a, b) => a.order - b.order);

// 查询操作
const handleQuery = async (params: any = {}) => {
	state.tableLoading = true;
	state.tableParams = Object.assign(state.tableParams, params);
	const requestParams = Object.assign({}, state.tableQueryParams, state.tableParams);
	const result = await planSharpApi.page(requestParams).then((res) => res.data.result);
	state.tableParams.total = result?.total;
	state.tableData = (result?.items ?? []) as PlanSharpTableItem[];
	state.tableLoading = false;
};

// 列排序
const sortChange = async (column: any) => {
	state.tableParams.field = column.prop;
	state.tableParams.order = column.order;
	await handleQuery();
};

// 删除
const delPlanSharp = (row: PlanSharpTableItem) => {
	ElMessageBox.confirm(`确定要删除吗?`, '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(async () => {
			await planSharpApi.delete({ id: row.id });
			handleQuery();
			ElMessage.success('删除成功');
		})
		.catch(() => {});
};

// 批量删除
const batchDelPlanSharp = () => {
	ElMessageBox.confirm(`确定要删除${state.selectData.length}条记录吗?`, '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(async () => {
			await planSharpApi.batchDelete(state.selectData.map((u: PlanSharpTableItem) => ({ id: u.id }))).then((res) => {
				ElMessage.success(`成功批量删除${res.data.result}条记录`);
				handleQuery();
			});
		})
		.catch(() => {});
};

// 导出数据
const exportPlanSharpCommand = async (command: string) => {
	try {
		state.exportLoading = true;
		if (command === 'select') {
			const params = Object.assign({}, state.tableQueryParams, state.tableParams, { selectKeyList: state.selectData.map((u: PlanSharpTableItem) => u.id) });
			await planSharpApi.exportData(params).then((res) => downloadStreamFile(res));
		} else if (command === 'current') {
			const params = Object.assign({}, state.tableQueryParams, state.tableParams);
			await planSharpApi.exportData(params).then((res) => downloadStreamFile(res));
		} else if (command === 'all') {
			const params = Object.assign({}, state.tableQueryParams, state.tableParams, { page: 1, pageSize: 99999999 });
			await planSharpApi.exportData(params).then((res) => downloadStreamFile(res));
		}
	} finally {
		state.exportLoading = false;
	}
};

// 只取前10位，假设格式为YYYY-MM-DD HH:mm:ss
const formatDate = (row: PlanSharpTableItem, column: any, cellValue?: string) => {
	if (!cellValue) return '';
	const dateStr = cellValue.slice(0, 10);
	// 过滤掉无效的默认日期
	if (dateStr === '1900-01-01') return '';
	return dateStr;
};

// 展开行切换
const handleExpandChange = async (row: PlanSharpTableItem, expanded: boolean) => {
	if (expanded && row.ch && !state.shipDetailsCache[row.ch]) {
		try {
			const result = await planSharpApi.getShipDetails({ ch: row.ch });
			state.shipDetailsCache[row.ch] = result.data.result || [];
		} catch (error) {
			ElMessage.error('获取船号详情失败');
			console.error(error);
		}
	}
};

// 批量更新进度
const updateAllProgress = async () => {
	try {
		state.tableLoading = true;
		ElMessage.info('正在更新所有船号的分段报验进度...');
		await planSharpApi.updateAllProgress();
		ElMessage.success('分段报验进度更新完成');
		handleQuery(); // 刷新数据
		// 清除子表缓存，确保展开时显示最新数据
		state.shipDetailsCache = {};
	} catch (error) {
		ElMessage.error('进度更新失败');
		console.error(error);
	} finally {
		state.tableLoading = false;
	}
};

// 合并船坞相同的单元格
const spanMethod = ({ row, column, rowIndex, columnIndex }: any) => {
	if (column.property === 'dock') {
		const currentDock = (row as PlanSharpTableItem).dock;
		if (!currentDock) return [1, 1]; // 如果船坞为空，不合并

		// 向上查找相同船坞的起始位置
		let startIndex = rowIndex;
		for (let i = rowIndex - 1; i >= 0; i--) {
			if ((state.tableData[i] as PlanSharpTableItem)?.dock === currentDock) {
				startIndex = i;
			} else {
				break;
			}
		}

		// 向下查找相同船坞的结束位置
		let endIndex = rowIndex;
		for (let i = rowIndex + 1; i < state.tableData.length; i++) {
			if ((state.tableData[i] as PlanSharpTableItem)?.dock === currentDock) {
				endIndex = i;
			} else {
				break;
			}
		}

		// 如果当前行是起始行，返回合并的行数
		if (rowIndex === startIndex) {
			return [endIndex - startIndex + 1, 1];
		} else {
			// 如果不是起始行，隐藏此单元格
			return [0, 0];
		}
	}
	return [1, 1];
};

handleQuery();
</script>
<template>
	<div class="planSharp-container" v-loading="state.exportLoading">
		<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
			<el-form :model="state.tableQueryParams" ref="queryForm" labelWidth="90">
				<el-row>
					<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10">
						<el-form-item label="关键字">
							<el-input v-model="state.tableQueryParams.keyword" clearable placeholder="请输入模糊查询关键字" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
						<el-form-item label="船坞">
							<el-input v-model="state.tableQueryParams.dock" clearable placeholder="请输入船坞" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
						<el-form-item label="批次">
							<el-input v-model="state.tableQueryParams.batch" clearable placeholder="请输入批次" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
						<el-form-item label="船级社">
							<el-input v-model="state.tableQueryParams.classificationSociety" clearable placeholder="请输入船级社" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
						<el-form-item label="船型">
							<el-input v-model="state.tableQueryParams.shipType" clearable placeholder="请输入船型" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
						<el-form-item label="船东">
							<el-input v-model="state.tableQueryParams.shipOwner" clearable placeholder="请输入船东" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
						<el-form-item label="浮前">
							<el-input v-model="state.tableQueryParams.dockBefore" clearable placeholder="请输入浮前" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
						<el-form-item label="浮后">
							<el-input v-model="state.tableQueryParams.dockAfter" clearable placeholder="请输入浮后" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
						<el-form-item label="船号">
							<el-input v-model="state.tableQueryParams.ch" clearable placeholder="请输入船号" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
						<el-form-item label="状态">
							<g-sys-dict v-model="state.tableQueryParams.statusAll" code="FinishStatusEnum" render-as="select" placeholder="请选择状态" clearable filterable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10">
						<el-form-item>
							<el-button-group style="display: flex; align-items: center">
								<el-button type="primary" icon="ele-Search" @click="handleQuery" v-auth="'planSharp:page'" v-reclick="1000"> 查询 </el-button>
								<el-button icon="ele-Refresh" @click="resetQueryParams"> 重置 </el-button>
								<el-button icon="ele-ZoomIn" @click="() => (state.showAdvanceQueryUI = true)" v-if="!state.showAdvanceQueryUI" style="margin-left: 5px"> 高级查询 </el-button>
								<el-button icon="ele-ZoomOut" @click="() => (state.showAdvanceQueryUI = false)" v-if="state.showAdvanceQueryUI" style="margin-left: 5px"> 隐藏 </el-button>
								<el-button type="danger" style="margin-left: 5px" icon="ele-Delete" @click="batchDelPlanSharp" :disabled="state.selectData.length == 0" v-auth="'planSharp:batchDelete'">
									删除
								</el-button>
								<el-button type="primary" style="margin-left: 5px" icon="ele-Plus" @click="editDialogRef.openDialog(null, '新增号船分析')" v-auth="'planSharp:add'"> 新增 </el-button>
								<el-dropdown :show-timeout="70" :hide-timeout="50" @command="exportPlanSharpCommand">
									<el-button type="primary" style="margin-left: 5px" icon="ele-FolderOpened" v-reclick="20000" v-auth="'planSharp:export'"> 导出 </el-button>
									<template #dropdown>
										<el-dropdown-menu>
											<el-dropdown-item command="select" :disabled="state.selectData.length == 0">导出选中</el-dropdown-item>
											<el-dropdown-item command="current">导出本页</el-dropdown-item>
											<el-dropdown-item command="all">导出全部</el-dropdown-item>
										</el-dropdown-menu>
									</template>
								</el-dropdown>
								<el-button type="warning" style="margin-left: 5px" icon="ele-MostlyCloudy" @click="importDataRef.openDialog()" v-auth="'planSharp:import'"> 导入 </el-button>
								<el-button type="success" style="margin-left: 5px" icon="ele-Refresh" @click="updateAllProgress" v-auth="'planSharp:update'"> 更新进度 </el-button>
							</el-button-group>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</el-card>
		<el-card class="full-table" shadow="hover" style="margin-top: 5px">
			<el-table
				:data="state.tableData"
				@selection-change="
					(val: any[]) => {
						state.selectData = val;
					}
				"
				@expand-change="handleExpandChange"
				:span-method="spanMethod"
				style="width: 100%"
				v-loading="state.tableLoading"
				tooltip-effect="light"
				row-key="id"
				@sort-change="sortChange"
				border
			>
				<el-table-column type="expand" width="40" align="center">
					<template #default="{ row }">
						<div style="padding: 20px">
							<el-table :data="state.shipDetailsCache[row.ch] || []" border size="small" style="width: 100%" v-if="state.shipDetailsCache[row.ch]">
								<el-table-column prop="typeName" label="分类" width="100" />
								<el-table-column prop="total" label="总计" width="100" align="center" />
								<el-table-column prop="completedCount" label="完工数" width="100" align="center" />
								<el-table-column prop="earliestStartDate" label="First开工" width="100">
									<template #default="{ row: detailRow }">
										{{ detailRow.earliestStartDate ? formatDate(detailRow, null, detailRow.earliestStartDate) : '-' }}
									</template>
								</el-table-column>
								<el-table-column prop="latestEndDate" label="Latest完工" width="100">
									<template #default="{ row: detailRow }">
										{{ detailRow.latestEndDate ? formatDate(detailRow, null, detailRow.latestEndDate) : '-' }}
									</template>
								</el-table-column>
								<el-table-column prop="progress" min-width="120" label="进度(%)" align="center">
									<template #default="{ row: detailRow }">
										<div style="display: flex; align-items: center; width: 100%">
											<el-progress :percentage="detailRow.progress" :stroke-width="8" :show-text="false" style="flex: 1" />
											<span style="margin-left: 8px; white-space: nowrap; width: 50px; text-align: right">{{ detailRow.progress }}%</span>
										</div>
									</template>
								</el-table-column>
							</el-table>
							<div v-else style="text-align: center; padding: 20px; color: #999">暂无数据</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column type="selection" width="40" align="center" v-if="auth('planSharp:batchDelete') || auth('planSharp:export')" />
					<el-table-column type="index" label="序号" width="55" align="center" />
					<el-table-column
						v-for="col in visibleColumns()"
						:key="col.key"
						:prop="col.prop"
						:label="col.label"
						sortable="custom"
						show-overflow-tooltip
					/>
				<el-table-column prop="startSharpTime" width="90" label="开工" show-overflow-tooltip>
					<template #default="scope">
						<span>
							{{ scope.row.startSharpTime ? formatDate(scope.row, null, scope.row.startSharpTime) : '' }}
						</span>
					</template>
				</el-table-column>
				<el-table-column prop="offDockTime" width="90" label="下坞" show-overflow-tooltip>
					<template #default="scope">
						<span>
							{{ scope.row.offDockTime ? formatDate(scope.row, null, scope.row.offDockTime) : '' }}
						</span>
					</template>
				</el-table-column>
				<el-table-column prop="floatTime" width="90" label="起浮" show-overflow-tooltip>
					<template #default="scope">
						<span>
							{{ scope.row.floatTime ? formatDate(scope.row, null, scope.row.floatTime) : '' }}
						</span>
					</template>
				</el-table-column>
				<el-table-column prop="fdTotal" label="分段量" show-overflow-tooltip />
				<el-table-column prop="swsInt" label="本部" show-overflow-tooltip />
				<el-table-column prop="otherInt" label="外协" show-overflow-tooltip />
				<el-table-column prop="firstPStrTime" width="90" label="计划开工" show-overflow-tooltip>
					<template #default="scope">
						<span>
							{{ scope.row.firstPStrTime ? formatDate(scope.row, null, scope.row.firstPStrTime) : '' }}
						</span>
					</template>
				</el-table-column>
				<el-table-column prop="firstStrTime" width="90" label="实际开工" show-overflow-tooltip>
					<template #default="scope">
						<span>
							{{ scope.row.firstStrTime ? formatDate(scope.row, null, scope.row.firstStrTime) : '' }}
						</span>
					</template>
				</el-table-column>
				<el-table-column prop="lastEndTime" width="90" label="实际完工" show-overflow-tooltip>
					<template #default="scope">
						<span>
							{{ scope.row.lastEndTime ? formatDate(scope.row, null, scope.row.lastEndTime) : '' }}
						</span>
					</template>
				</el-table-column>
				<el-table-column prop="jindu" min-width="150" label="进度(%)" align="center">
					<template #default="scope">
						<div style="display: flex; align-items: center; width: 100%">
							<el-progress :percentage="scope.row.jindu || 0" :stroke-width="8" :show-text="false" style="flex: 1" />
							<span style="margin-left: 8px; white-space: nowrap; width: 50px; text-align: right">{{ scope.row.jindu || 0 }}%</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="statusAll" label="状态" show-overflow-tooltip>
					<template #default="scope">
						<g-sys-dict v-model="scope.row.statusAll" code="FinishStatusEnum" />
					</template>
				</el-table-column>
				<el-table-column label="修改记录" width="100" align="center" show-overflow-tooltip>
					<template #default="scope">
						<ModifyRecord :data="scope.row" />
					</template>
				</el-table-column>
				<el-table-column label="操作" width="160" align="center" fixed="right" show-overflow-tooltip v-if="auth('planSharp:update') || auth('planSharp:delete')">
					<template #header>
						<div class="operation-header">
							<span>操作</span>
							<el-popover
								ref="columnSettingsPopoverRef"
								placement="bottom-end"
								width="260"
								trigger="click"
								popper-class="column-settings-popover"
							>
								<template #reference>
									<el-button text type="primary" :title="'列设置'" class="operation-settings-btn">
										<el-icon><Setting /></el-icon>
									</el-button>
								</template>
								<div class="column-visible-settings">
									<div class="column-visible-title">
										自定义列显示
										<el-button type="primary" link style="padding-left: 8px" @click="resetColumnSettings">重置</el-button>
									</div>
									<el-scrollbar height="220">
										<transition-group name="list" tag="div">
											<div
												v-for="(col, index) in state.columnSettings"
												:key="col.key"
												class="column-setting-item"
												draggable="true"
												@dragstart="onColumnDragStart(index, $event)"
												@dragover.prevent
												@drop="onColumnDrop(index)"
											>
												<el-checkbox v-model="col.visible">
													{{ col.label }}
												</el-checkbox>
												<el-icon class="drag-handle"><Rank /></el-icon>
											</div>
										</transition-group>
									</el-scrollbar>
								</div>
							</el-popover>
						</div>
					</template>
					<template #default="scope">
						<el-button icon="ele-Edit" size="small" text type="primary" @click="editDialogRef.openDialog(scope.row, '编辑号船分析')" v-auth="'planSharp:update'"> 编辑 </el-button>
						<el-button icon="ele-Delete" size="small" text type="primary" @click="delPlanSharp(scope.row)" v-auth="'planSharp:delete'"> 删除 </el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				v-model:currentPage="state.tableParams.page"
				v-model:page-size="state.tableParams.pageSize"
				@size-change="(val: any) => handleQuery({ pageSize: val })"
				@current-change="(val: any) => handleQuery({ page: val })"
				layout="total, sizes, prev, pager, next, jumper"
				:page-sizes="[10, 20, 50, 100, 200, 500]"
				:total="state.tableParams.total"
				size="small"
				background
			/>
			<ImportData ref="importDataRef" :import="planSharpApi.importData" :download="planSharpApi.downloadTemplate" v-auth="'planSharp:import'" @refresh="handleQuery" />
			<printDialog ref="printDialogRef" :title="'打印号船分析'" @reloadTable="handleQuery" />
			<editDialog ref="editDialogRef" @reloadTable="handleQuery" />
		</el-card>
	</div>
</template>
<style scoped>
:deep(.el-input),
:deep(.el-select),
:deep(.el-input-number) {
	width: 100%;
}

.operation-header {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.operation-settings-btn {
	color: var(--el-color-primary);
	padding: 0 4px;
}

.column-visible-settings {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 220px;
}

.column-visible-title {
	display: flex;
	align-items: center;
	font-size: 13px;
	color: #606266;
	margin-bottom: 4px;
}

.column-setting-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 6px 8px;
	border-radius: 4px;
	border: 1px dashed transparent;
	margin-bottom: 6px;
	transition: all 0.2s;
	cursor: move;
}

.column-setting-item:hover {
	border-color: #dcdfe6;
	background-color: #f5f7fa;
}

.column-setting-item.is-disabled {
	cursor: not-allowed;
	opacity: 0.7;
}

.drag-handle {
	color: #c0c4cc;
	font-size: 16px;
}

.column-settings-popover {
	padding: 12px 16px;
}
</style>
